<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
  <style>

  </style>
</head>

<body>
  <!-- https://codesandbox.io/s/vtable-columns-nested-structure-forked-4d6gs9?file=/src/index.ts:45-5361 -->
  <div id="tableContainer" style="width: 600px;height:400px;"></div>

  <script>
    window.onload = function () {

      const tableInstance = new VTable.PivotTable(
        document.getElementById("tableContainer"),
        {
          enableDataAnalysis: true,
          indicatorsAsCol: false,
          records: [],
          columns: [],
          rows: [],
          indicators: [],
          rowTree: [],
          columnTree: [],
          widthMode: "autoWidth",
          theme: VTable.themes.DEFAULT
        }
      );
      setTimeout(() => {
        tableInstance.updateOption({
          enableDataAnalysis: true,
          indicatorsAsCol: false,
          records: [
            {
              a21352116468bd54b57m868ba25c462e4121: "公司",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 1120901.0199999989,
              cdf82179995e7724754bbea1a269b6917f54: 77.00000000000003,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 2540,
              eb8c026a778bee342a2tb7d7471b628fdec9: "二级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "消费者",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 4593603.069999985,
              cdf82179995e7724754bbea1a269b6917f54: 332.0999999999987,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 11132,
              eb8c026a778bee342a2tb7d7471b628fdec9: "标准级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "公司",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 3059557.799999996,
              cdf82179995e7724754bbea1a269b6917f54: 191.65000000000106,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 6749,
              eb8c026a778bee342a2tb7d7471b628fdec9: "标准级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "消费者",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 1831726.7099999988,
              cdf82179995e7724754bbea1a269b6917f54: 115.55000000000037,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 4361,
              eb8c026a778bee342a2tb7d7471b628fdec9: "二级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "小型企业",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 546150.0299999999,
              cdf82179995e7724754bbea1a269b6917f54: 32.099999999999966,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 1283,
              eb8c026a778bee342a2tb7d7471b628fdec9: "二级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "公司",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 644401.3199999998,
              cdf82179995e7724754bbea1a269b6917f54: 52.749999999999915,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 1622,
              eb8c026a778bee342a2tb7d7471b628fdec9: "一级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "消费者",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 1250011.1099999996,
              cdf82179995e7724754bbea1a269b6917f54: 77.15000000000006,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 2832,
              eb8c026a778bee342a2tb7d7471b628fdec9: "一级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "小型企业",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 1686131.890000002,
              cdf82179995e7724754bbea1a269b6917f54: 99.40000000000025,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 4047,
              eb8c026a778bee342a2tb7d7471b628fdec9: "标准级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "消费者",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 349731.35000000003,
              cdf82179995e7724754bbea1a269b6917f54: 23.24999999999999,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 848,
              eb8c026a778bee342a2tb7d7471b628fdec9: "当日"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "小型企业",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 508980.21,
              cdf82179995e7724754bbea1a269b6917f54: 36.34999999999996,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 1128,
              eb8c026a778bee342a2tb7d7471b628fdec9: "一级"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "小型企业",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 149826.39999999997,
              cdf82179995e7724754bbea1a269b6917f54: 5.300000000000001,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 322,
              eb8c026a778bee342a2tb7d7471b628fdec9: "当日"
            },
            {
              a21352116468bd54b57m868ba25c462e4121: "公司",
              c0b3fe0fa79171e46c1eb1ca286176bca32b: 327933.2100000001,
              cdf82179995e7724754bbea1a269b6917f54: 17.1,
              a4ae72bd003ee384afcy94a1ea7f439f3392: 670,
              eb8c026a778bee342a2tb7d7471b628fdec9: "当日"
            }
          ],
          columns: [
            {
              dimensionKey: "eb8c026a778bee342a2tb7d7471b628fdec9",
              title: "装运模式"
            },
            {
              dimensionKey: "a21352116468bd54b57m868ba25c462e4121",
              title: "细分"
            }
          ],
          rows: [],
          indicators: [
            {
              indicatorKey: "a4ae72bd003ee384afcy94a1ea7f439f3392",
              title: "数量",
              customRender: (args) => {
                const elements = [];
                elements.push({
                  type: "rect",
                  fill: "#4991e3",
                  x: 10,
                  y: 10,
                  width: 10,
                  height: 10
                });
                return {
                  elements,
                  expectedHeight: 180,
                  expectedWidth: 40
                };
              }
            },
            {
              indicatorKey: "c0b3fe0fa79171e46c1eb1ca286176bca32b",
              title: "销售额"
            },
            {
              indicatorKey: "cdf82179995e7724754bbea1a269b6917f54",
              title: "折扣",
              cellType: "progressbar",
              style: {
                barHeight: "100%",
                barColor: "transparent",
                barBgColor: "#4991e3"
              }
            }
          ],
          rowTree: [],
          columnTree: [],
          frozenColCount: 2
        });
      }, 100);

    }
  </script>
</body>

</html>